<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>跨浏览器的js二维码生成器</title>
		<script src="../../js/lib/qrcode/qrcode.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var elText = null;
			var elQrcode = null;
			var qrcode = null;

			function makeCode() {
				if(!elText.value) {
					alert("Input a text");
					elText.focus();
					return;
				}
				qrcode.makeCode(elText.value);
			}
			window.onload = function() {
				elText = document.querySelector("#text");
				elQrcode = document.querySelector("#qrcode");
				qrcode = new QRCode(elQrcode, {
					width: 150,
					height: 150,
					useSVG: true
				});
				makeCode();
				elText.addEventListener("blur", function() {
					makeCode();
				})
				elText.addEventListener("keydown", function(e) {
					if(e.keyCode === 13) {
						makeCode();
					}
				})
			}
		</script>
	</head>

	<body>
		<div>
			<a href="index.html" target="_self">demo with img</a>
			<br />
			<a href="index2.html">demo with svg</a>
			<br />
			<a href="../../jquery/01/index.html">jquery.qrcode实现</a>
		</div>
		<p>实现方式 :svg图</p>
		<div>网址：<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br /></div>
		<div id="qrcode" style="width:150px; height:150px; margin-top:15px;"></div>

	</body>

</html>